<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left" class="receipt-form">
      <el-divider content-position="left">基本信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="工单号" prop="workOrder">
            <el-input v-model="form.workOrder" placeholder="请输入工单号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="入库数量" prop="receiptQuantity">
            <el-input v-model.number="form.receiptQuantity" type="number" min="0" placeholder="请输入入库数量" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="入库类型" prop="receiptType">
            <el-select v-model="form.receiptType" placeholder="请选择入库类型">
              <el-option label="采购入库" value="采购入库" />
              <el-option label="生产入库" value="生产入库" />
              <el-option label="退货入库" value="退货入库" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="创建人" prop="creator">
            <el-input v-model="form.creator" placeholder="请输入创建人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">物料信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料编码" prop="materialId">
            <el-input v-model="form.materialId" placeholder="请输入物料编码" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料名称" prop="materialName">
            <el-input v-model="form.materialName" placeholder="请输入物料名称" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料规格" prop="specification">
            <el-input v-model="form.specification" placeholder="请输入物料规格" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">单据信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="单据编号" prop="documentNumber">
            <el-input v-model="form.documentNumber" placeholder="请输入单据编号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="单据类型" prop="documentType">
            <el-select v-model="form.documentType" placeholder="请选择单据类型">
              <el-option label="采购单" value="采购单" />
              <el-option label="生产单" value="生产单" />
              <el-option label="退货单" value="退货单" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer" style="margin-top: 32px; text-align: center;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addReceipt } from '@/api/receipt/receipt'
import eventBus from '@/utils/eventBus'

export default {
  name: 'ReceiptAdd',
  meta: { title: '新增入库' },
  data() {
    return {
      form: {
        workOrder: null,
        receiptQuantity: null,
        materialId: null,
        specification: null,
        materialName: null,
        documentNumber: null,
        documentType: null,
        creator: null,
        receiptType:null
      },
      rules: {}
    }
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addReceipt(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            
            // 发送库存刷新事件，通知库存管理页面刷新数据
            eventBus.$emit('refresh-inventory');
            
            this.$router.back()
          })
        }
      })
    },
    cancel() {
      this.$router.back()
    }
  }
}
</script>
<style scoped>
.receipt-form {
  background: #fff;
  padding: 24px 18px 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(41,128,185,0.08);
}
</style>
